<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>巡检报告</title>
    <style>
        /* 字体优化：优先使用系统默认无衬线体，兼顾中文显示 */
        body {
            font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "SimSun", "STSong", serif;
            margin: 2.5cm auto;
            max-width: 960px;
            color: #2d3748;
            line-height: 1.7;
            background-color: #fff;
        }

        h1 {
            text-align: center;
            color: #1a5fb4;
            border-bottom: 2px solid #1a5fb4;
            padding-bottom: 12px;
            margin-top: 0;
            font-size: 24px;
            font-weight: 600;
            letter-spacing: 1px;
        }

        h3 {
            text-align: left;
            color: #1a5fb4;
            margin: 32px 0 18px 0;
            font-size: 18px;
            font-weight: 600;
            padding-left: 4px;
            border-left: 3px solid #1a5fb4;
        }

        .info-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            font-size: 14px;
        }

        .info-table th {
            width: 15%;
            font-weight: bold;
            background-color: #f8fafc;
            text-align: center;
            color: #4a5568;
            padding: 10px 8px;
        }

        .info-table td {
            padding: 10px 12px;
            border: 1px solid #e2e8f0;
            vertical-align: top;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 12px;
            table-layout: fixed;
            font-size: 14px;
        }

        th, td {
            border: 1px solid #e2e8f0;
            padding: 10px;
            text-align: left;
            word-wrap: break-word;
        }

        th {
            background-color: #edf2f7;
            color: #1a5fb4;
            text-align: center;
            font-weight: 600;
        }

        .section {
            margin: 30px 0;
        }

        /* 配电房标题 */
        .room-header {
            background-color: #ebf4ff;
            font-weight: 600;
            color: #1a5fb4;
            padding: 12px 16px;
            border-left: 4px solid #1a5fb4;
            margin: 20px 0 12px;
            font-size: 16px;
            border-radius: 0 4px 4px 0;
        }

        /* 配电箱标题 */
        .cabinet-header {
            background-color: #f8fafc;
            font-weight: 600;
            padding: 10px 14px;
            border-bottom: 1px solid #e2e8f0;
            margin: 14px 0 8px;
            color: #2d3748;
            font-size: 15px;
        }

        /* 图片区域 */
        .photo-section {
            margin: 15px 0 25px;
            padding: 16px;
            background-color: #fafbff;
            border: 1px solid #eef4ff;
            border-radius: 8px;
            width: 100%;
            box-sizing: border-box;
        }

        .photo-title {
            font-weight: 600;
            margin-bottom: 12px;
            color: #1a5fb4;
            text-align: center;
            font-size: 15px;
        }

        .photo-container {
            text-align: center;
            padding: 10px 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 16px;
        }

        .photo-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 150px;
            max-width: 150px;
        }

        .img-wrapper {
            width: 150px;
            height: 150px;
            border: 1px solid #cbd5e0;
            border-radius: 6px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
            background-color: #ffffff;
            overflow: hidden;
            margin-bottom: 6px;
        }

        .img-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

        .photo-item p {
            margin: 4px 0 0;
            font-size: 12px;
            color: #4a5568;
            text-align: center;
        }

        .no-photo {
            font-size: 14px;
            color: #718096;
            font-style: normal;
            padding: 40px 20px;
            background-color: #f8fafc;
            border-radius: 6px;
            min-width: 200px;
            display: inline-block;
            text-align: center;
            border: 1px dashed #cbd5e0;
        }

        .footer {
            margin-top: 60px;
            text-align: center;
            color: #718096;
            border-top: 1px solid #e2e8f0;
            padding-top: 20px;
            font-size: 13px;
            line-height: 1.5;
        }

        /* 响应式微调 */
        @media print {
            body {
                margin: 1.5cm auto;
                max-width: none;
            }
        }
    </style>
</head>
<body>

<!-- 以下内容完全保留，不做任何修改 -->
<h1 th:text="${report?.title} ?: '电力设备巡检报告'"></h1>

<!-- 基本信息 -->
<div class="section">
    <table class="info-table">
        <tr>
            <th>订单编号</th>
            <td th:text="${report?.orderNumber} ?: '-'"></td>
            <th>巡检时间</th>
            <td th:text="${#temporals.format(report?.inspectionTime, 'yyyy-MM-dd HH:mm')} ?: '-'"></td>
        </tr>
        <tr>
            <th>电工姓名</th>
            <td th:text="${report?.electricianName} ?: '-'"></td>
            <th>联系电话</th>
            <td th:text="${report?.electricianPhone} ?: '-'"></td>
        </tr>
    </table>
</div>

<!-- 分组巡检项目 -->
<div class="section">
    <h3>一、巡检项目（按配电房与配电箱分组）</h3>

    <!-- 遍历每个配电房 -->
    <div th:each="room : ${report?.groupedItems}" class="room-section">
        <div class="room-header">
            配电房：[[${room.roomName}]] (ID: [[${room.roomId}]])
        </div>

        <!-- 遍历该配电房下的每个配电箱 -->
        <div th:each="cabinet : ${room.cabinets}" class="cabinet-section">
            <div class="cabinet-header">
                配电箱：[[${cabinet.cabinetName}]] (ID: [[${cabinet.cabinetId}]])
            </div>

            <!-- 巡检项目表格 -->
            <table>
                <thead>
                <tr>
                    <th>巡检项目</th>
                    <th>标准值</th>
                    <th>检测值</th>
                    <th>状态</th>
                    <th>建议</th>
                </tr>
                </thead>
                <tbody>
                <!-- 遍历该配电箱下的每个巡检项 -->
                <tr th:each="item : ${cabinet.items}">
                    <td th:text="${item.name} ?: '-'"></td>
                    <td th:text="${item.standardValue} ?: '-'"></td>
                    <td th:text="${item.actualValue} ?: '-'"></td>
                    <td th:text="${item.resultStatus?.name()} ?: '-'"></td>
                    <td th:text="${item.remarks} ?: '-'"></td>
                </tr>

                <!-- 照片行 -->
                <tr class="photo-row">
                    <td colspan="5">
                        <div class="photo-section">
                            <div class="photo-title">现场照片（该配电箱）</div>
                            <div class="photo-container">
                                <!-- 遍历每个项目的照片 -->
                                <div th:each="item, itemStat : ${cabinet.items}" th:with="photos=${item.photoUrls}">
                                    <div th:each="photo, iterStat : ${photos}">
                                        <div class="photo-item">
                                            <div class="img-wrapper">
                                                <img
                                                        th:src="${photo}"
                                                        th:alt="'第 ' + (${itemStat.index} * 10 + ${iterStat.index} + 1) + ' 张'"
                                                        onerror="this.src='data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;150&quot; height=&quot;150&quot; viewBox=&quot;0 0 150 150&quot;&gt;&lt;rect width=&quot;150&quot; height=&quot;150&quot; fill=&quot;#f8fafc&quot; stroke=&quot;#cbd5e0&quot; stroke-width=&quot;1&quot;/&gt;&lt;text x=&quot;50%25&quot; y=&quot;50%25&quot; font-size=&quot;14&quot; fill=&quot;#a0aec0&quot; text-anchor=&quot;middle&quot; alignment-baseline=&quot;middle&quot;&gt;图片加载失败&lt;/text&gt;&lt;/svg&gt;'"
                                                />
                                            </div>
                                            <p th:text="'第 ' + (${itemStat.index} * 10 + ${iterStat.index} + 1) + ' 张'"></p>
                                        </div>
                                    </div>
                                </div>

                                <!-- 无图提示 -->
                                <div class="no-photo" th:if="!${cabinet.hasPhotos}">
                                    该配电箱无现场照片。
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- AI 建议 -->
<div class="section">
    <h3>二、AI 分析建议</h3>
    <p th:text="${report?.aiSuggestion} ?: '系统暂未生成智能建议。'"></p>
</div>

<!-- 页脚 -->
<div class="footer">
    <p>本报告由电力运维平台自动生成。</p>
</div>

</body>
</html>